<template>
	<div class="my">
		<div class="myone">
			<div class="mynone">
				<router-link to="/moblie/home">
					<img src="../../assets/img/mobile/返回.png">
				</router-link>
			</div>
			<div class="myimg">
				<router-link to="/pc/pchome">
					PC端
				</router-link>
				<img src="../../assets/img/mobile/客服.png" />
				<!-- <router-link to="/moblic/setup"> -->
					<img src="../../assets/img/mobile/205设置-线性.png" @click="shezhi" />
				<!-- </router-link> -->
				<img src="../../assets/img/mobile/消息-置灰.png" />
			</div>
		</div>
		<div class="mytwo">
			<img v-show="img==null" src="../../assets/img/mobile/user-logo-004.png" />
			<img v-show="img!=null" :src="'http://127.0.0.1/api/public/showimg/'+img" />
			<div class="mylogin" v-show="nickname==null">
				<router-link to="/login">请登录</router-link>
			</div>
			<div class="mylogin" v-show="nickname!=null">
				{{nickname}}
			</div>
			
		</div>
		<div class="mybutton" >
			<button v-for="(item,i) in mybutton" :key="i">
				<p>{{item.num}}</p>
				<p>{{item.name}}</p>
			</button>
		</div>
		
		<div class="myorders">
			<div class="orders">
				<div class="one">
					<img src="../../assets/img/mobile/one.png" />
					<p>我的订单</p>
				</div>
				<router-link to="/moblie/myorders">
					<button>查看全部 ></button>
				</router-link>
			</div>
			<div class="orderstwo">
				<div class="btn">
					<button>
						<router-link to="/moblie/myorders">
							<img src="../../assets/img/mobile/待付款.png" />
							<p>待付款</p>
						</router-link>
					</button>
					<button>
						<router-link to="/moblie/myorders">
							<img src="../../assets/img/mobile/待发货.png" />
							<p>待发货</p>
						</router-link>
					</button>
					<button>
						<router-link to="/moblie/myorders">
							<img src="../../assets/img/mobile/待收货.png" />
							<p>待收货</p>
						</router-link>
					</button>
					<button>
						<router-link to="/moblie/myorders">
							<img src="../../assets/img/mobile/待评价.png" />
							<p>待评价</p>
						</router-link>
					</button>
				</div>
				<div class="btn">
					<button>
						<router-link to="/moblie/myorders">
							<img src="../../assets/img/mobile/待确认.png" />
							<p>待确认</p>
						</router-link>
					</button>
					<button>
						<router-link to="/moblie/myorders">
							<img src="../../assets/img/mobile/退货退款.png" />
							<p>退货退款</p>
						</router-link>
					</button>
					<button style="margin-right: 6rem;">
						<router-link to="/moblie/myorders">
							<img src="../../assets/img/mobile/订单完成.png" />
							<p>订单完成</p>
						</router-link>
					</button>
				</div>
			</div>
		</div>
		<div class="myorders">
			<div class="orders">
				<div class="one">
					<img src="../../assets/img/mobile/shop.png" />
					<p>我的购物车</p>
				</div>
				<button>查看全部 ></button>
			</div>
		</div>
		
		<div class="m">
			<div class="n">
				<div class="j">
					<router-link to="/myorders">
						
					</router-link>
				</div>
				<div class="k">
					<router-link to="/moblie/mycart">
						<img src="../../assets/img/mobile/shop.png" />
						<p>我的购物车</p>
					</router-link>
				</div>
				<div class="l">
					<img src="../../assets/img/mobile/two.png" />
					<div>我的收藏</div>
				</div>
			</div>
		</div>
		<div>
			<hr>
		</div>
		<MobileHomeList proptitle="新书上市" :proplist='newslist'></MobileHomeList>
	</div>
</template>

<script>
	import MobileHomeList from '@/components/mobile/home/MobileHomeList.vue';
	export default {
		name: 'MobileMy',
		components: {
			MobileHomeList,
		},
		data() {
			return {
				newslist: [],
				mybutton:[
					{id:1,num:0,name:'我的竞拍'},
					{id:2,num:0,name:'我的关注'},
					{id:3,num:0,name:'收藏夹'},
					{id:4,num:0,name:'足迹'},
					{id:5,num:0,name:'优惠劵'},
				],
				account:'',
				nickname : '',
				img : '',
			}
		},
		methods: {
			getHotBook() {
				this.$axios.get("http://127.0.0.1/api/public/book/findTopSale/6").then((resp) => {
					resp.data.data.forEach((item) => {
						this.newslist.push(item);
						console.log(this.newslist);
					})
					console.log(this.newslist)
				})
			},
			shezhi(){
				localStorage.removeItem('token');
				localStorage.removeItem('account');
				localStorage.removeItem('name');
				localStorage.removeItem('img');
				localStorage.removeItem('role');
				localStorage.removeItem('vuex');
				this.account='';
				this.nickname = null;
				this.img = null;
			}
		},
		mounted() {
			this.getHotBook();
		},
		created(){
			this.account = localStorage.getItem('account');
			this.nickname = localStorage.getItem('name');
			this.img = localStorage.getItem('img');
		}
	}
</script>

<style>
	.my{
		width: 100%;
		height: 100%;
		background-color: #ede6d3;
	}
	.my .myone{
		display: flex;
		justify-content: space-between;
	}
	.my .myone .mynone img{
		width: 2rem;
	}
	.my .myone .myimg{
		width: 40%;
		display: flex;
		justify-content: center;
	}
	.my .myone .myimg img{
		margin-left: 1rem;
		width: 2rem;
	}
	.mytwo{
		background-color: #ede6d3;
		display: flex;
		margin-left: 1rem;
		margin-top: 1.5rem;
	}
	.mytwo img{
		width: 5rem;
	}
	.mytwo button{
		display: flex;
		border: none;
		border-radius: 2rem;
		height: 2rem;
		width: 10rem;
		margin-top: 1rem;
		margin-left: 4rem;
	}
	.mytwo button img{
		width: 1.5rem;
	}
	.mytwo button p{
		margin-top: 0.4rem;
		margin-left: 0.5rem;
	}
	.mytwo .mylogin{
		margin-top: 1.5rem;
		margin-left: 2rem;
	}
	.mybutton{
		display: flex;
		justify-content: space-between;
		margin-top: 1rem;
	}
	.mybutton button{
		border: none;
		background-color: #e5e6d6;
	}
	.myorders{
		background-color: white;
		border-radius: 1rem;
	}
	.myorders .orders{
		display: flex;
		justify-content: space-between;
		margin-top: 2rem;
		background-color: white;
		border-radius: 1rem;
	}
	.myorders .orders button{
		border: none;
		background-color: white;
		border-radius: 2rem;
		color: #BABABA;
	}
	.myorders .orders .one{
		display: flex;
		justify-content: space-between;
	}
	.myorders .orders .one p{
		margin-top: 0.3rem;
	}
	.myorders .orders .one img{
		width: 2rem;
	}
	.myorders .orderstwo .btn img{
		width: 2rem;
	}
	.myorders .orderstwo .btn{
		display: flex;
		justify-content: space-between;
		margin: 1rem;
	}
	.myorders .orderstwo .btn button{
		border: none;
		border-radius: 1rem;
		background-color: white;
	}
	
	
	
	.n div img {
		margin-top: 1.5rem;
		width: 3.5rem;
	}

	.j {
		margin-right: 3rem;
	}
	.j p{
		color: black;
	}

	.k {
		margin-right: 3rem;
	}
	.k p{
		color: black;
	}

	.n {
		display: flex;
		justify-content: center;
	}

	.m {
		margin-top: -0.3rem;
		width: 100%;
		height: 8rem;
		background-color: #fffae8;
	}


	.f {
		color: white;
		margin-top: 3.5rem;
		margin-left: 8rem;
	}

	.e {
		color: white;
		margin-top: 4.3rem;
		margin-left: -3rem;
	}

	.c {
		display: flex;
		width: 100%;
		height: 10rem;
	}

	.c img {
		margin-left: 2rem;
		margin-top: 1.5rem;
		width: 5rem;
		height: 5rem;
		border-radius: 50%;
	}
</style>
